@{
ViewData["Title"] = "商品信息";
var p = ViewBag.Data;
}

<!-- start page title -->
<div class="row">
  <div class="col-12">
    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
      <h4 class="mb-sm-0">商品编辑</h4>

      <div class="page-title-right">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a asp-controller="Home"
               asp-action="Index">首页
            </a>
          </li>
          <li class="breadcrumb-item">
            <a asp-controller="Commodity"
               asp-action="GetPage">商品管理
            </a>
          </li>
          <li class="breadcrumb-item active">商品编辑</li>
        </ol>
      </div>

    </div>
  </div>
</div>
<!-- end page title -->

<div class="card"
     style="min-height: 400px;">
  <div class="card-header d-flex justify-content-between">
    <span>商品信息</span>·
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-6 offset-3">
        <form id="formInfo"
              enctype="multipart/form-data">
          <input type="hidden"
                 id="commodityid"
                 value="@p?.CommodityID">
          <div class="mb-3 row form-group">
            <label for="cm_name"
                   class="col-sm-2 col-form-label">商品名</label>
            <div class="col-sm-9">
              <input type="text"
                     class="form-control"
                     id="cm_name"
                     value="@p?.Cm_name"
                     name="cname">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="firm"
                   class="col-sm-2 col-form-label">单位</label>
            <div class="col-sm-9">
              <input type="text"
                     class="form-control"
                     id="firm"
                     value="@p?.firm">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="price"
                   class="col-sm-2 col-form-label">单价</label>
            <div class="col-sm-9">
              <input type="text"
                     class="form-control"
                     id="price"
                     value="@p?.Price">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="introduce"
                   class="col-sm-2 col-form-label">简介</label>
            <div class="col-sm-9">
              <textarea rows="3"
                        class="form-control"
                        id="introduce">@p?.introduce</textarea>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="photofile"
                   class="col-sm-2 col-form-label">图片</label>
            <div class="col-sm-9">
              <input type="hidden"
                     id="photo"
                     value="@p?.Photo" />
              <input type="file"
                     id="photofile"
                     style="display: none;" />
              <img id="imgfile"
                   src="\upload\@p?.Photo"
                   style="width: 160px;height: 160px;"
                   asp-append-version="true">
            </div>
          </div>
          <div class="mb-3 row">
            <div class="col-12 text-center">
              <button type="button"
                      id="btn-submit"
                      class="btn btn-primary mb-3">提交</button>
              <button type="reset"
                      id="btn-reset"
                      class="btn btn-light mb-3">重置</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

@section DemoCss{
<link rel="stylesheet"
      href="~/css/shopforweb.css"
      asp-append-version="true" />
}

@section PluginScripts{
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation/dist/additional-methods.min.js"></script>
<script src="~/js/jquery.validate.extension.jeparo.js"></script>
}




@section DemoScripts{
<script>
  let validtor;
  $(function () {
    //表单检验策略
    validtor = $("#formInfo").validate({
      rules: {
        cname: {
          required: true,
          pattern: /^((?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])|(\d))+$/
        }
      }
    })
    //激活菜单
    $("#menu_commoditys").addClass("active");
    //提交数据
    $("#btn-submit").on("click", function () {
      if (!$("#formInfo").valid()) {
        alert("数据修改不规范，请重新修改");
        return;
      }
      //按照表单本身设置上传
      let formData = new FormData($("#formInfo")[0]);
      formData.append("commodityid", $("#commodityid").val());
      formData.append("cm_name", $("#cm_name").val());
      formData.append("firm", $("#firm").val());
      formData.append("price", $("#price").val());
      formData.append("introduce", $("#introduce").val());
      formData.append("photo", $("#photo").val());
      formData.append("photofile", $("#photofile")[0].files[0])

      $.ajax({
        type: $("#commodityid").val() ? "post" : "put",
        url: "/admin/commoditys/info",
        data: formData,
        dataType: "json",
        contentType: false,
        processData: false,
        success: function (response) {
          alert(response.message);
          if (response.status == 0) location.href = `/admin/commoditys`
        }
      })
    })
    //图片点击
    $("#imgfile").on("click", function () {
      $("#photofile").click();
    })
    //图片预览
    $("#photofile").on("change", function () {
      let reader = new FileReader();
      reader.onload = function () {
        $("#imgfile").attr("src", this.result);
      }
      reader.readAsDataURL($(this)[0].files[0]);
    })
    //重置按钮
    $("#btn-reset").on("click", function () {
      validtor.resetForm();
      validtor.cleanForm();

      $("#imgfile").attr("src", `/upload/${$("#photo").val()}`);
    })
  });
</script>
}
